<template>
  <div id="wrap">
    <!-- 头部导航 -->
    <v-header :headerFixed="headerFixed"></v-header>
    
    <!-- 左侧导航 -->
    <side-bar v-on:message="changeEvent"></side-bar>

    <!-- 右侧主内容区 -->
    <div class="content" :class="{'ischange': ischange}">
      <transition name="fade">
          <router-view class="view"></router-view>
      </transition>
    </div>  
  </div>
</template>

<script>

import vHeader from '../components/header.vue'
import sideBar from '../components/sideBar.vue'

export default {
  name: 'app',
  data: function (){
    return {
      ischange: false,
      headerFixed : true,
      data: []
    }
  },
  mounted: function (){
    // this.$http.get('/api/data').then(response => {
    //   this.data = response.data;
    // }, response => {
    //   console.log("Ajax con't get the data!");
    // });
  },
  methods: {
    handleSelect(key, path){
      
    },
    changeEvent: function(value){
      console.log(value);
      this.ischange = value;
    }
  },
  components: {
    'v-header': vHeader,
    'side-bar': sideBar
  },
  watch: {
     '$route': function (to,from) {
        console.log(to, from);
      }
  }
}
</script>

<style scoped>
    .content{
      /*height: 100%;*/
      background: none repeat scroll 0 0 #fff;
      padding: 20px 40px;
      box-sizing: content-box;
      border: 1px solid rgba(178, 172, 172, 0.7);
      box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.46);
      margin: 20px 40px 60px 20px;
      position: relative;
    }
    .content:after{
      content: '';
      position: absolute;
      top: 0em;
      right: 0px;

      display: inline-block;
      width: 0;
      height: 0;
      opacity: 0.3;
      
      transform: translate(0%, -50%) rotate(-30deg);
      transform-origin: bottom right;
      border-bottom-left-radius: 0.2em;
      box-shadow: -0.2em 0.2em 0.3em -0.1em rgba(147, 147, 147, 0.81);
      background: linear-gradient(to left bottom, rgba(218, 218, 218, 0) 45%, rgba(198,198,198,0.2) 60%, rgba(195, 194, 194, 0.8)) 100% 0 no-repeat;
      transition: transform 1.2s, width 1.2s ease, height 1.2s, opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
    }
    .ischange:after{
      width: 1.73em;
      height: 3em;
      opacity: 1;
    }
</style>